<template>
  <transition name="fade" mode="out-in">
    <div class="detail">
      <van-nav-bar
        title="收入详情"
        left-arrow
        @click-left="onClickLeft"
      />
      <van-cell-group class="cell-group">
        <van-cell title="订单号" value="SDR746484" />
        <van-cell title="订单完成日期" value="2018/11/12" />
        <van-cell title="客户" value="何佳丽" />
        <van-cell title="订单金额" value="¥637.08" />
      </van-cell-group>
      <van-cell-group class="cell-group">
        <van-cell title="所属业务员" value="赵耀" />
        <van-cell title="分成比例" value="12%" />
        <van-cell title="分成金额" value="¥12.00" />
      </van-cell-group>
      <van-cell-group class="cell-group">
        <van-cell title="上级业务员" value="赵鹏" />
        <van-cell title="上级分成比例" value="15%" />
        <van-cell title="分成金额" value="¥12.00" />
      </van-cell-group>
    </div>
  </transition>
</template>

<script>
import { Button, NavBar, Cell, CellGroup } from 'vant';
export default {
  components: {
    [Button.name]: Button,
    [NavBar.name]: NavBar,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
  },
  data () {
    return {

    }
  },
  mounted() {

  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
  },
}
</script>

<style scoped>
.detail {
  height: 100vh;
  overflow: auto;
  background-color: #F3F3F3;
  color: #38393A;
}
.cell-group {
  margin-top: 8px;
}
</style>
